import { 
    defineComponent,
    toRefs, 
    ref, 
    onMounted,
    reactive
} from "vue";
import echarts from 'echarts'

export default defineComponent({
    name: 'histogram',
    // 通过对象形式列出prop，这些property的名称和值分别是prop各自的名称和类型。
    props: {
        data: Object,
        id: String,
        name: String
    },
    setup(props,context){

        console.log(context)

        const newProps = toRefs(props)

        const echartsData = reactive({
            data: ref(newProps.data),
            id: ref(newProps.id),
            name: ref(newProps.name),
        })

        const draw = () => {
            //指定图表的配置项和数据
            const option = {
                color: '#1989fa',
                grid: {
                    top: '10%',
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: echartsData.data.xData,
                    splitLine: { show: false },
                    axisLabel: { color:' rgba(0,0,0,0.9)' },
                    axisTick: { show: false }
                },
                yAxis: {
                    type: 'value',
                    splitLine: { show: false },
                    axisLabel: { color:' rgba(0,0,0,0.9)' },
                    axisTick: { show: false }
                },
                series: [{
                    showSymbol: false,
                    smooth: true,
                    data: echartsData.data.yData,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    }
                }]
            };
            const myChart = echarts.init(document.getElementById(echartsData.id));
            myChart.setOption(option);
        }

        const download = () => {
            const myChart = echarts.init(document.getElementById(echartsData.id));
            myChart.resize();
            const a = document.createElement('a')
            a.download = echartsData.name
            a.href = myChart.getDataURL({
                type: "png",
                backgroundColor: "#fff"
            });
            a.click();
        }

        onMounted(() => {
            setTimeout(() => {
                draw()
            })
            
        });

        return {
            echartsData,
            download
        }
      
    },  
    
})